<template>
  <div class="main">
<!--    <div class="basic-box button-bar">-->
<!--      <el-input v-model="searchValue" class="searchInput" placeholder="请输入内容" />-->
<!--      <el-button class="button" type="primary" icon="el-icon-search">搜索</el-button>-->
<!--    </div>-->
    <div class="basic-box" style="width: 100%">
      <el-table ref="table" :data="tableData">
        <el-table-column prop="id" label="借书记录id" min-width="150" align="center" />
        <el-table-column prop="isbn" label="isbn" min-width="150" align="center" />
        <el-table-column prop="bookname" label="书籍名称" min-width="150" align="center" />
        <el-table-column prop="username" label="借书用户名" min-width="150" align="center" />
        <el-table-column prop="borrow" label="借书时间" min-width="150" align="center" />
        <el-table-column prop="return" label="归还期限" min-width="150" align="center" />
        <el-table-column prop="state" label="归还状态" min-width="150" align="center" />
        <el-table-column label="操作" width="200" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button class="action-button" type="primary" size="small" @click="toDetail(scope.row)">查看</el-button>
            <el-button class="action-button" type="success" size="small" @click="toEdit(scope.$index)">还书</el-button>
            <el-button class="action-button" type="danger" size="small" @click="toDelete(scope.$index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
<!--    分页器-->
    <div class="pagination">
<!--      <span class="demonstration">直接前往</span>-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalData">
      </el-pagination>
    </div>
    <!--    弹窗类组件-->
    <el-dialog title="确定用户已还将无法撤销" :visible.sync="isEditMode" width="20%" center>
<!--      <span>-->
<!--        <el-select v-model="editValue" placeholder="请选择修改后状态" style="width: 100%">-->
<!--          <el-option v-for="item in borrowStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
<!--        </el-select>-->
<!--      </span>-->
      <span slot="footer" class="dialog-footer">
        <el-button @click="isEditMode = false">取 消</el-button>
        <el-button type="primary" @click="confirmEdit">确定还书</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
  import { getBookBorrowHistory , deleteRecord ,getRecordTotal ,returnBook} from '@/api/book.js'
  import { DateFomatter } from '@/utils/timeFomater'
  import { Message } from 'element-ui'

  export default {
    data() {
      return {
        searchValue: '',
        now: new Date(),
        isEditMode: false,
        editValue: '',
        editId: '',
        totalData:0,
        tableData: [],
        categoryList:[
          {
            "icon" : "wenxue",
            "title" : "文学"
          }, {
            "icon" : "xiaofeipin",
            "title" : "流行"
          }, {
            "icon" : "yishu",
            "title" : "文化"
          }
        ],
        borrowStatus:[
          { value: '0', label: '未归还' },
          { value: '1', label: '已归还' },
        ],
        page: 1,
        size: 10
      }
    },
    mounted() {
      this.getTableData()

    },
    methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);

        this.size = Number(`${val}`)
        this.page = Number(1)
        this.getTableData()

      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.page = Number(`${val}`)
        this.getTableData()
      },
      toDetail(row) {
        this.$router.push({ path: 'bookManage/bookDetail', query: { 'id': row.isbn }})
      },
      toEdit(index) {
        this.editId = this.tableData[index].id
        // this.editValue = this.tableData[index]
        this.isEditMode = true
      },
      toDelete(index){
        var form = { id: Number(this.tableData[index].id)}
        console.log(form)
        deleteRecord(form).then(
          (res) => {
            console.log(res)
            if(res.status === 200){
              Message({
                message: res.message,
                type: 'success',
                duration: 5 * 1000
              })
              setTimeout(res =>{
                window.location.reload()
              },1000)
            }

          });
        //    发送表单
      },
      confirmEdit() {
        var form = { id: this.editId}
        this.editValue = ''
        this.editId = ''
        console.log(form)
        this.isEditMode = false
        //    发送表单
        returnBook(form).then(
          res =>{
              console.log(res)
              if(res.status === 200)
                Message({
                  message: '操作成功',
                  type: 'error',
                  duration: 5 * 1000
                })
          }
        )
      },
      getTableData() {
        getRecordTotal().then(
          res =>{
            this.totalData = res.data.total
            console.log(this.totalData)
          }
        )
        getBookBorrowHistory(this.page,this.size).then(
          res => {
            console.log(res.data.table)
            var tableData = res.data.table

            for(var i = 0;i < tableData.length;i++){
              tableData[i].borrow = DateFomatter(tableData[i].borrow,'yyyy-MM-dd')
              tableData[i].return  = DateFomatter(tableData[i].borrow,'yyyy-MM-dd')
              if(tableData[i].state)
                tableData[i].state = this.borrowStatus[1].label
              else
                tableData[i].state = this.borrowStatus[0].label

            }
            this.tableData = tableData

          }
        )
      },

    }
  }
</script>

<style scoped lang="scss">
  .main{
    margin:  40px 40px 0 40px;
    width: 80%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  .basic-box{
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 10px;
  }
  .action-button{
    border-radius: 5px;
    padding: 5px 10px;
    /*border: 1px solid #a2a2a2;*/
  }
  .button-bar{
    /*position: absolute;*/
    /*top: 40px;*/
    /*align-self: flex-end;*/
    width: 40%;
    display: flex;
    flex-direction: row;
    .searchInput{
      width: 200px;
    }
    .button{
      margin-left: 20px;
    }
  }
  .pagination{
    margin: 30px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items:center;
    justify-content: center;
  }

</style>
